<!-- 
@name: 首页
-->
<template>
	<div id="mySubordinate" class="page">
		<!-- <div class="searchWrap">
			<form action="/">
				<van-search v-model="searchValue" placeholder="搜索商品" @search="onSearch" />
			</form>
		</div> -->
		<div class="content-wrap">
			<div class="totalText1">
				{{totalpv}}<span class="totalText2">累计奖励积分</span>
			</div>
			<!-- 订单分类 -->
			<van-tabs v-model="searchData.type" color='#FFCE17' @click="onClick" v-if="$route.query.value2 != 'false'">

				<van-tab :title="item.name" :name="item.value" v-for="(item,index) in getGtypeList" :key="index"></van-tab>
			</van-tabs>
			<!-- 订单分类 end-->

			<div class="diy-area">
				<div class="like">
					<div class="type2" ref='type2Scorll' id='type2Scorll'>
						<van-list v-model="loading" offset='10' :finished="finished" finished-text="没有更多了" @load="onLoad">
							<!-- 分享平台 -->
							<div v-if="searchData.type == 'INVITE_REGISTER'">
								<div class="item " v-for="(goodsItem, goodsIndex) in orderList" :key="goodsIndex">

									<div class=" flex-row" @click="goDetail(goodsItem.pkey)">
										<div style="flex:1">
											<div class="flex-between">
												<div class="text1">{{goodsItem.createdTime}}</div>
												<div class="text5">+{{goodsItem.point}}</div>
											</div>
											<div class="flex-between">
												<div class="text6">注册时间</div>
												<div class="text6">奖励积分</div>
											</div>
										</div>
									</div>

								</div>
							</div>
							<!-- 分享平台 end-->
							<!-- 分享商品 -->
							<div v-if="searchData.type == 'GOODS_CONSUMPTION'">
								<div class="item " v-for="(goodsItem, goodsIndex) in orderList" :key="goodsIndex">

									<div class=" flex-row" @click="goDetail(goodsItem.pkey)">
										<img object-fit="fill" :src="goodsItem.photo"></img>
										<div style="flex:1">
											<div class="flex-between">
												<div class="text3">{{goodsItem.title}}</div>
												<div class="text5">+{{goodsItem.point}}</div>
											</div>
											<div class="flex-between">
												<div class="text6">立即购买日期：{{goodsItem.createdTime}}</div>
												<div class="text6">奖励积分</div>
											</div>
										</div>
									</div>

								</div>
							</div>
							<!-- 分享商品 end-->
							<!-- 分享银行业务 -->
							<div v-if="searchData.type == 'BOOK'">
								<div class="item " v-for="(goodsItem, goodsIndex) in orderList" :key="goodsIndex">

									<div class=" flex-row" @click="goDetail(goodsItem.pkey)">
										<div style="flex:1">
											<div class="flex-between">
												<div class="text1">{{goodsItem.title}}</div>
												<div class="text5">+{{goodsItem.point}}</div>
											</div>
											<div class="flex-between">
												<div class="text6">登记时间：{{goodsItem.createdTime}}</div>
												<div class="text6">奖励积分</div>
											</div>
										</div>
									</div>

								</div>
							</div>
							<!-- 分享银行业务 end-->
						</van-list>

					</div>
				</div>
			</div>
	
		</div>
	</div>
</template>
<script>
export default {
	name: 'app',
	components: {},
	data() {
		return {
			searchValue: '',
			searchTypeIndex: '',
			getGtypeList: [
				{
					name: '分享平台',
					value: 'INVITE_REGISTER',
				},
				{
					name: '分享商品',
					value: 'GOODS_CONSUMPTION',
				},
				{
					name: '分享银行业务',
					value: 'BOOK',
				},
			],
			searchTypeList: [
				{ value: '销量最高', pkey: 'XS' },
				{ value: '距离最近', pkey: 'NEAR' },
				{ value: '评分最高', pkey: 'RATE' },
			],
			searchData: {
				page: 0,
				pagesize: 5,
				type: 'INVITE_REGISTER', //INVITE_REGISTER 分享平台, GOODS_CONSUMPTION 分享商品 , BOOK 分享银行业务
			},
			totalpv: 0,
			orderList: [],
			activeName: '',
			loading: false,
			finished: false,
		};
	},

	created() {
		// this.getGtype_goods();
		this.searchData.type = this.$route.query.status;
		console.log(this.searchData.type);
	},
	methods: {
		delOrder_order(pkey, item = {}) {
			this.$dialog
				.confirm({
					title: '提示',
					message: '确定删除订单吗',
				})
				.then(() => {
					this.$myApi
						.delOrder_order({
							pkey: pkey,
						})
						.then((res) => {
							if (res.code == 0) {
								this.$notify({
									type: 'success',
									message: '操作成功',
								});

								this.onClick();
							} else {
							}
						});
				})
				.catch(() => {
					// on cancel
				});
		},
		goCouponDetail(pkey) {
			// console.log()
			this.$router.push({
				path: '/coupon/detail',
				query: { pkey: pkey },
			});
		},
		goDetail(pkey) {
			// this.$router.push({
			// 	path: '/mySubordinate/detail',
			// 	query: { pkey: pkey },
			// });
		},
		sortChange(pkey) {
			this.searchData.sortType = pkey;
			this.clearSearch();
			this.finished = true;
			this.getData(true);
		},
		onLoad() {
			console.log('触底');
			this.getData();
		},
		//切换标签
		onClick() {
			this.clearSearch();
			this.finished = true;
			this.getData(true);
		},
		getGtype_goods() {
			this.$myApi.getGtype_goods().then((res) => {
				if (res.code == 0) {
					this.getGtypeList = res.result;
				} else {
				}
			});
		},
		getData(finished) {
			// finished 避免清空列表出发刷新
			var params = this.searchData;
			this.$myApi.query_share(params).then((res) => {
				if (res.code == 0) {
					this.orderList = [
						...this.orderList,
						...res.result.line.content,
					];
					this.totalpv = res.result.pv;
					this.loading = false;
					this.searchData.page++;
					if (finished) {
						this.finished = false;
					}
					if (
						res.result.line.content.length <
						this.searchData.pagesize
					) {
						this.finished = true;
					}
				} else {
				}
			});
		},
		clearSearch() {
			this.orderList = [];
			this.searchData.page = 0;
			this.searchData.pagesize = 5;
			this.finished = false;
		},
		onSearch(e) {
			console.log(e);
			this.clearSearch();
			this.searchData.title = e;
			this.finished = true;
			this.getData(true);
		},
		onCancel() {},
	},
};
</script>
<style lang="less">
#mySubordinate {
	padding-left: 0rem;
	padding-right: 0rem;
	padding-bottom: 0;
	min-height: 100vh;
	background-color: #fafafa;
	padding-top: 0.2rem;

	.van-swipe__indicators {
		bottom: 25px;
	}
	.van-search__content {
		border-radius: 20px;
	}
	.searchWrap {
		width: 100%;
	}
	.searchHistory {
		padding: 0.25rem;
		background-color: #fff;
		img {
			height: 0.28rem;
			width: 0.32rem;
		}
		.text1 {
			font-size: 0.28rem;
			font-weight: bold;
			color: #333333;
			margin-bottom: 0.2rem;
		}
		.text2 {
			background: #f5f5f5;
			border-radius: 5px;
			padding: 0.16rem 0.3rem;
			margin-right: 0.12rem;
			margin-bottom: 0.12rem;
			white-space: nowrap;
			display: inline-block;
			font-size: 0.24rem;
			color: #666666;
		}
		.text3 {
			.text2();
			color: #999999;
		}
	}
	.content-wrap {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		border-radius: 20px;
		padding: 0.24rem;
		.totalText1 {
			font-size: 0.72rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			margin-bottom: 0.2rem;
		}
		.totalText2 {
			font-size: 0.24rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-left: 0.2rem;
		}
		.diy-area {
			// background-color: #fff;
			position: relative;
			background-color: inherit;

			img {
				vertical-align: top;
			}

			.banner {
				.bannerImg {
					height: 4rem;
					width: 100%;
				}
			}
			.br {
				height: 0.2rem;
				width: 100%;
				background: #fafafa;
			}
			.likeTitle {
				font-size: 0.32rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				margin-bottom: 0.24rem;
				text-align: center;
			}
			.like {
				// max-height: 200px;
				position: relative;
				.buttons {
					padding-top: 0.24rem;
					border-top: 1px solid #ededed;
					width: 100%;
					margin-top: 0.32rem;
				}
				.button {
					background: #ffce17;
					border-radius: 20px;
					font-size: 0.26rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333;
					padding: 0.15rem 0.44rem;
					height: auto;
					height: auto;
					margin-left: 0.16rem;
				}
				.button2 {
					border-radius: 20px;
					font-size: 0.26rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333;
					padding: 0.15rem 0.44rem;
					margin-left: 0.16rem;
				}
				.type2 {
					width: 100%;
					overflow-x: scroll;
					height: 11rem;
					// padding-bottom: 1rem;
					img {
						height: 1.2rem;
						width: 1.2rem;
						margin-right: 0.24rem;
						border-radius: 10px;
					}
					.item {
						// margin-bottom: 8px;
						background: #fff;
						padding: 0.24rem;
						border-radius: 10px;
						.text1 {
							font-size: 0.26rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #000000;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							margin-bottom: 0.32rem;
						}
						.text2 {
							font-size: 0.26rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ff4358;
							margin-bottom: 0.32rem;

							white-space: nowrap;
						}
						.text5 {
							.text2();
							color: #D95954;
							font-weight: bold
						}
						.text6 {
							.text2();
							color: #999999;
						}
						.text3 {
							font-size: 0.28rem;
							font-family: PingFang SC;
							font-weight: bold;
							color: #000000;
							margin-bottom: 0.25rem;
						}
						.text4 {
							font-size: 0.24rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}
					}
				}
			}
			.iconWrap {
				position: relative;
				padding-bottom: 0.55rem;
				border-radius: 20px 20px 0 0;
				top: -0.3rem;
				// margin-top: -0.4rem;
				background-color: #fafafa;
				z-index: 999;
				display: grid;
				grid-template-columns: repeat(4, 25%);
				.iconImg {
					width: 0.8rem;
					height: 0.8rem;
					margin-bottom: 0.12rem;
				}
				.item {
					-webkit-box-flex: 1;
					flex: 1;
					margin-top: 0.3rem;
					font-size: 0.24rem;
					text-align: center;
				}
			}
		}
	}
}
</style>
<style lang="less" scoped>
/deep/.van-tabs__nav--line.van-tabs__nav--complete {
	background: #f8f8f8;
}
/deep/.van-search .van-cell {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	font-size: 0.28rem;
}
/deep/.van-tab {
	// flex: 0 1 auto;
	// width: 1rem;
	font-size: 0.3rem;
}
/deep/.van-tab--active {
	font-weight: bold;
	font-size: 0.32rem;
}
</style>